<template>
    <div id='wrap12'>
        <div class="box">
            <input type="text" id="input1" v-model="inputvalue">
            <div class="content">
                <button class="but" @click="del()">AC</button>
                <button class="but" @click="spcae()">
                    < </button>
                        <button v-for="(item, index) in str" :key="index" :class="'but'" @click="add(item)">
                            {{ item }}
                        </button>
                        <button class="but" @click="calc()">=</button>
                        <!--
            <button class="but">%</button>
            <button class="but">/</button>
            <button class="but">7</button>
            <button class="but">8</button>
            <button class="but">9</button>
            <button class="but">*</button>
            <button class="but">4</button>
            <button class="but">5</button>
            <button class="but">6</button>
            <button class="but">-</button>
            <button class="but">1</button>
            <button class="but">2</button>
            <button class="but">3</button>
            <button class="but">+</button>
            <button class="but">0</button>
            <button class="but">.</button>
            -->
            </div>
        </div>

    </div>
</template>
<script lang='ts'>
export default {
    name: '',
}
</script>
<script lang='ts' setup>
import { ref } from 'vue';
import { h } from 'vue';
const str = ['%', '/', '7', '8', '9', '*', '4', '5', '6', '-', '1', '2', '3', '+', '0', '.'];
const inputvalue = ref<string>('');
//添加功能
function add(item: string) {
    inputvalue.value += item;
}
//清空功能
function del() {
    inputvalue.value = '';
}
//计算功能
function calc() {
    inputvalue.value = eval(inputvalue.value);
}
//退格功能
function spcae() {
    inputvalue.value = inputvalue.value.substring(0, inputvalue.value.length - 1)
}
</script>
<style lang='scss' scoped>
#wrap12 {
    color: rgb(243, 231, 233);

    .box {
        width: 500px;
        height: 700px;
        margin: 50px auto;
        background: gray;


        #input1 {
            height: 20%;
            width: 100%;
            background: rgba(0, 0, 0, 0.7);
            border: none;
            font-size: 70px;
            color: white;
            box-sizing: border-box;
            /* 删除input的光标 */
            caret-color: transparent;
            outline: none;
        }

        .content {
            display: flex;
            flex: 1;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }

        .but {
            width: 125px;
            height: 112px;
            font-size: 50px;
            color: aliceblue;
            border: 1px solid black;
        }

        .but:nth-child(-n+3) {
            background: rgba(0, 0, 0, 0.5);
            border-right: none;
            border-top: none;
        }

        .but:nth-child(4n) {
            background: orange;
            border-right: none;
            font-size: 80px;
            border-top: none;
        }

        .but:nth-child(5),
        .but:nth-child(6),
        .but:nth-child(7) {
            background: rgba(0, 0, 0, 0.3);
            border-right: none;
            border-top: none;
        }

        .but:nth-child(9),
        .but:nth-child(10),
        .but:nth-child(11) {
            background: rgba(0, 0, 0, 0.3);
            border-right: none;
            border-top: none;
        }

        .but:nth-child(13),
        .but:nth-child(14),
        .but:nth-child(15) {
            background: rgba(0, 0, 0, 0.3);
            border-right: none;
            border-top: none;
        }

        .but:nth-child(17),
        .but:nth-child(18) {
            background: rgba(0, 0, 0, 0.3);
            border-right: none;
            border-top: none;
        }

        .but:nth-child(17) {
            width: 250px;
        }

        .but:nth-child(19) {
            background: orange;
            border-right: none;
            font-size: 60px;
            border-top: none;
        }
    }
}
</style>